<template>
  <ul>
    <li class="left">
      <div class="highlight">
        <highlight-toolbar
          :selectedRange="selectedRange"
          :content="content"
          :contentHTML="contentHTML"
          :contentId="contentId" />
      </div>
      <div class="content-box">
        <div
          id="contentHTML"
          ref="contentHTML"
          v-html="content"
          class="content"
          @click="popTip"
          @mouseup="handleMouseUp"
        ></div>
        <ul>
          <li v-for="item in isTipShowArrayList" :key="item.id">
            <drag-resize
              :id="item.id"
              :tipTitle="item.tipTitle"
              :tipContent="item.tipContent"
              :isShow="item.isShow"
              @closePop="handleTipCloseFn"
            ></drag-resize>
          </li>
        </ul>
      </div>
      <div class="jiaohu-box">
        <div class="wrap">
          <ul class="cube">
            <li class="side" v-for="(item) in cubeList" :key="item.id" :class="item.styleName">
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="item.tooltip"
                placement="top-start"
              >
                <h2>{{ item.name }}</h2>
              </el-tooltip>
              <el-tooltip
                class="box-item"
                v-for="(item2) in infoList" :key="item2.id" :class="item2.className"
                effect="dark"
                :content="item2.content"
                placement="top-start"
              >
                <div class="edge" :class="item2.className"></div>
              </el-tooltip>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li class="right">
      <p>弹窗栏</p>
    </li>
  </ul>
</template>

<script setup>
import { ref, onMounted, nextTick} from 'vue'
import dragResize from '../../components/dragResize.vue'
import MathJax from '@/utils/mathjax.ts'
import { useTipsStore } from '@/stores/index'
import { storeToRefs } from 'pinia'
import { getCourseContents, getTipContents, updateTipContents } from '@/api/course/index.ts'
import { useRoute } from 'vue-router'
import HighlightToolbar from '@/views/course/components/HighlightToolbar.vue'

const tipsStore = useTipsStore()
const { content, isTipShowArrayList } = storeToRefs(tipsStore)
const route = useRoute()

const contentId = ref()
onMounted(async () => {
  contentId.value = route.query.id
  const res = await getCourseContents(contentId.value)
  tipsStore.handleContent(res.data.content)

  await nextTick(() => {
    if (MathJax.isMathjaxConfig) {
      MathJax.initMathjaxConfig()
    }
    MathJax.MathQueue()
  })
})


const popTip = async (e) => {
  const target = e.target
  if (target.tagName === 'SPAN') {
    const data = target.dataset
    const res = await getTipContents(Number(data.id))
    tipsStore.handleTipContent(Number(data.id), res.data.title, res.data.content, res.data.judge)
  }
}

const handleTipCloseFn = async (id) => {
  const data = {
    id: id,
    judge: false
  }
  await updateTipContents(data)
  tipsStore.handleTipClose(id)
}

const selectedRange = ref(null)
const contentHTML = ref()

const handleMouseUp = () => {
  const selection = window.getSelection()
  if (selection && selection.rangeCount > 0) {
    selectedRange.value = selection.getRangeAt(0)
  } else {
    selectedRange.value = null
  }
}

const cubeList = ref([
  { id: 0, styleName: 'cube-front', name: '面' ,tooltip:'正面'},
  { id: 1, styleName: 'cube-back', name: '面', tooltip:'背面' },
  { id: 2, styleName: 'cube-left', name: '面' ,tooltip:'左侧面'},
  { id: 3, styleName: 'cube-right', name: '面' , tooltip: '右侧面'},
  { id: 4, styleName: 'cube-top', name: '面' , tooltip: '上顶面'},
  { id: 5, styleName: 'cube-bottom', name: '面' ,tooltip: '下底面'}
])

const infoList = ref([
  { id: 0, className: 'edge-top', content: '棱' },
  { id: 1, className: 'edge-right', content: '棱' },
  { id: 2, className: 'edge-bottom', content: '棱' },
  { id: 3, className: 'edge-left', content: '棱' }
])
</script>

<style lang="scss" scoped>
@import url('../../styles/cource/test1.scss');
</style>
